<template>
  <div class="ranking" v-if="state">
    <div class="search">
      <div class="type">
        <el-radio-group v-model="search.type" size="small" @change="searchCount">
          <el-radio-button label="1">环境卫生</el-radio-button>
          <el-radio-button label="2">垃圾分类</el-radio-button>
          <el-radio-button label="3">公厕管护</el-radio-button>
        </el-radio-group>
      </div>
      <div class="form">
        <el-form inline>
          <el-form-item label="考评名称">
            <el-input v-model="search.title" size="small" placeholder="请输入" class="input"></el-input>
          </el-form-item>
          <el-form-item label="年份">
            <el-select v-model="search.year" placeholder="请选择" filterable clearable size="small" @change="searchPeriod">
              <el-option :label="item" :value="item" v-for="item in yearList" :key="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="期数">
            <el-select v-model="search.period" placeholder="请选择" filterable clearable size="small">
              <el-option :value="'第' + changeIntChar(item) + '期'" v-for="item in period" :key="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" class="button" @click="searchCount">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="street bg-ff b-r-5">
      <div class="title pd-10 f-w-b">
        <i class="fa fa-gg"></i>
        街道考评排名
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <!-- 街道总分排名 -->
          <street-sum :list="streetName['sum']"></street-sum>
        </el-col>
        <el-col :span="24">
          <div class="line" style="background-color: #f3f5f7; height: 10px"></div>
        </el-col>
        <el-col :span="12" class="border">
          <!-- 实地考评排名 -->
          <street-before :list="streetName['old']"></street-before>
        </el-col>
        <el-col :span="12">
          <!-- 整改考评排名 -->
          <street-after :list="streetName['new']"></street-after>
        </el-col>
      </el-row>
    </div>

    <div class="village bg-ff b-r-5 mt-10">
      <div class="title pd-10 f-w-b">
        <i class="fa fa-gg"></i>
        村考评排名
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <!-- 村总分排名 -->
          <village-sum :list="villageName['sum']"></village-sum>
        </el-col>
        <el-col :span="24" v-if="0">
          <div class="line" style="background-color: #f3f5f7; height: 10px"></div>
        </el-col>
        <el-col :span="12" class="border">
          <!-- 实地考评排名 -->
          <village-before :list="villageName['old']"></village-before>
        </el-col>
        <el-col :span="12">
          <!-- 整改考评排名 -->
          <village-after :list="villageName['new']"></village-after>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import streetSum from "./street/sum";
import streetBefore from "./street/before";
import streetAfter from "./street/after";
import villageSum from "./village/sum";
import villageBefore from "./village/before";
import villageAfter from "./village/after";
export default {
  components: {
    streetSum,
    streetBefore,
    streetAfter,
    villageSum,
    villageBefore,
    villageAfter,
  },
  data() {
    return {
      state: false,
      search: {
        type: "1",
        period: "",
        year: "",
      },
      period: 0,
      yearList: [],
      streetName: { sum: [], new: [], old: [] }, //街道名称统计
      villageName: { sum: [], new: [], old: [] }, //村名称统计
    };
  },
  methods: {
    // 数字转字符串 1 -> 一
    changeIntChar(i) {
      var c = ["", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
      return c[i];
    },
    // 搜索期数
    searchPeriod(year) {
      // 清空期数
      this.search.period = [];
      // 清空期数列表
      if (!year) {
        this.period = 0;
        return false;
      }
      var data = {
        year: year,
      };
      this.axios.post("/admin/Index/search_year_period", data).then((ref) => {
        var ref = ref.data;
        if (ref.state) {
          this.period = ref.other.data[0].period;
        }
      });
    },
    // 搜索年份
    searchYear() {
      this.axios.post("/admin/Index/search_year_period").then((ref) => {
        var ref = ref.data;
        if (ref.state) {
          var data = ref.other.data,
            year = [];
          for (var i in data) {
            if (year.indexOf(data[i].year) == -1) {
              year.push(data[i].year);
            }
          }
          this.yearList = year;
        }
      });
    },
    // 搜索排名
    searchCount() {
      this.axios.post("/admin/Index/get_home_count", this.search).then((res) => {
        let data = res.data;
        this.streetName = data.street_name;
        this.villageName = data.village_name;
      });
    },
  },
  created() {
    // 当登录用户为 村和街道管理员时
    var type = this.$store.state.user.type;
    if (type == 3 || type == 4) {
      this.$router.push({ path: "/evaluate/type1" });
    } else {
      this.state = true;
      this.searchYear();
      this.searchCount();
    }
  },
};
</script>
<style scoped>
.ranking .street,
.ranking .village {
  overflow: hidden;
}
.ranking .street > .title,
.ranking .village > .title {
  font-size: 18px;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
  line-height: 40px;
}

.ranking > .search {
  background-color: #fff;
  border-radius: 6px;
  padding: 10px 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ranking > .search .el-form-item {
  margin-bottom: 0;
}
</style>